let scene, camera, renderer, texture;

~(function () {
    // 创建场景对象Scene
    scene = new THREE.Scene();

    // 创建管道成型的路径(3D样条曲线)
    let curve = new THREE.CatmullRomCurve3([
        new THREE.Vector3(-120, -40, 0),
        new THREE.Vector3(-70, 40, 0),
        new THREE.Vector3(70, 40, 0),
        new THREE.Vector3(120, -40, 0)
    ]);
    let tube = new THREE.TubeGeometry(curve, 100, 1.6, 50, false);
    let textureLoader = new THREE.TextureLoader();
    texture = textureLoader.load('/images/wenli-1.jpg');
    // 设置阵列模式为 RepeatWrapping
    texture.wrapS = THREE.RepeatWrapping
    texture.wrapT=THREE.RepeatWrapping
    // 设置x方向的偏移(沿着管道路径方向)，y方向默认1
    // 等价texture.repeat= new THREE.Vector2(20,1)
    texture.repeat.x = 20;
    let tubeMaterial = new THREE.MeshPhongMaterial({
        map: texture,
        transparent: true,
    });
    let mesh = new THREE.Mesh(tube, tubeMaterial);
    scene.add(mesh);

    // 点光源
    let point = new THREE.PointLight(0xffffff);
    // 点光源位置
    point.position.set(400, 200, 300);
    // 点光源添加到场景中
    scene.add(point);
    // 点光源2
    let point2 = new THREE.PointLight(0xffffff);
    point2.position.set(-400, -200, -300);
    scene.add(point2);

    // 环境光
    let ambient = new THREE.AmbientLight(0x444444);
    // 环境光添加到场景中
    scene.add(ambient);

    // 相机窗口宽度
    let width = window.innerWidth;
    // 相机窗口高度
    let height = window.innerHeight;
    // 相机窗口宽高比
    let k = width / height;
    // 三维场景显示范围控制系数，系数越大，显示的范围越大
    let s = 200;
    //创建相机对象
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    // 设置相机位置
    camera.position.set(200, 300, 200);
    // 设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);

    // 渲染器对象
    renderer = new THREE.WebGLRenderer();
    // 设置渲染区域尺寸
    renderer.setSize(width, height);
    // 设置背景颜色
    renderer.setClearColor(0xb9d3ff, 1);
    // body元素中插入canvas对象
    document.body.appendChild(renderer.domElement);

    render();

    // 创建控件对象
    let controls = new THREE.OrbitControls(camera, renderer.domElement);
    // 监听鼠标、键盘事件: 与requestAnimationFrame渲染冲突
    // controls.addEventListener('change', render);

    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    let axesHelper = new THREE.AxesHelper(250);
    scene.add(axesHelper);
})();

/**
 * 渲染
 */
function render() {
    // 执行渲染操作
    renderer.render(scene, camera);

    requestAnimationFrame(render);

    // 使用加减法可以设置不同的运动方向
    // 设置纹理偏移
    texture.offset.x -= 0.06
}

function goIndex() {
    window.location.href = '/';
}